import React from "react";
import ReactDOM from "react-dom";
import "./index.less";

import { Tabs, Radio, Space } from "antd";
const { TabPane } = Tabs;

import Code1 from "./code/demo1";

const demos = [
  {
    key: "code1",
    text: "基础示例",
    content: <Code1 />
  }
];

const componentInfo = {
  title: "这里是react组件名",
  description: "这里是react组件描述。",
  instruction: (
    <>
      <p>这里是react组件使用说明，使用场景建议。</p>
      <p>这里是react组件使用说明，使用场景建议。</p>
      <p>这里是react组件使用说明，使用场景建议。</p>
      <p>这里是react组件使用说明，使用场景建议。</p>
    </>
  )
};

const App = () => {
  const { title, description, instruction } = componentInfo;
  return (
    <div className="demo-wrapper">
      <h1>{title}</h1>
      <p>{description}</p>
      <h2>何时使用</h2>
      <div>{instruction}</div>
      <h2>代码演示</h2>
      <section>
        <Tabs tabPosition={"left"}>
          {demos.map(({ key, text, content }) => (
            <TabPane tab={text} key={"key-" + key}>
              {content}
            </TabPane>
          ))}
        </Tabs>
      </section>
    </div>
  );
};

ReactDOM.render(<App />, document.querySelector("#root"));
